<template>
  <div class="wrap">
    <img src="@/assets/images/bj@2x.png" alt width="100%" />
    <div class="p10">
      <div class="invite-cont">
        <p>将我喜欢的鳄鱼推荐给你</p>
        <p>希望你也喜欢</p>
        <!-- <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt="" width="50%"> -->
        <van-image
          round
          width="150"
          height="150"
          :src="'http://www.qimiaola.com/Api/Users/genMyCode?user_id='+userId"
        />
        <br />
        <em>扫码加入，一起嗨购</em>
      </div>
      <van-button type="primary" size="large" @click="sentShare()">立即邀请</van-button>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";

var wx = require("weixin-js-sdk");
export default {
  mounted() {},
  computed: {
    ...mapGetters(["userId", "token"])
  },
  created() {
    this.sentShare = () => {
      wx.updateAppMessageShareData({
        title: "测试标题", // 分享标题
        desc: "加入鳄鱼，一起嗨购", // 分享描述
        link: "http://miaoguli.qimiaola.com", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl:
          "http://www.qimiaola.com/Api/Users/genMyCode?user_id=" + this.userId, // 分享图标
        success: function() {
          // 设置成功
        }
      });
    };
    this.getShare = () => {
      wx.ready(function() {
        //需在用户可能点击分享按钮前就先调用
        wx.updateAppMessageShareData({
          title: "测试标题", // 分享标题
          desc: "加入鳄鱼，一起嗨购", // 分享描述
          link: "http://miaoguli.qimiaola.com", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl:
            "http://www.qimiaola.com/Api/Users/genMyCode?user_id=" +
            this.userId, // 分享图标
          success: function() {
            // 设置成功
          }
        });
      });
    };
    this.getShare();
  }
};
</script>
<style lang="less" scoped>
.wrap {
  background: #ffeee6;
  padding: 0;
}
.invite-cont {
  width: 90%;
  margin: -80px auto 20px;
  text-align: center;
  background: white;
  border-radius: @border-radius*4;
  position: relative;
  z-index: 2;
  padding: 30px 0;
  line-height: 1.5em;
  em {
    font-size: 12px;
    color: @second-color;
  }
  img {
    margin: 10px auto;
  }
}
</style>